<template>
  <div
    :id="'select_regions_tree_component' + widgetInstanceId"
    class="select_regions-tree"
    @click.stop
  >
    <div class="regions-tree-body">
      <template>
        <div v-if="!cantSearch">
          <el-input
            v-model="filterText"
            class="regions-tree-search"
            :placeholder="placeHolderString"
          ></el-input>
          <el-icon class="regions-search-icon"><Search /></el-icon>
        </div>
      </template>

      <el-scrollbar
        class="filter-tree-scroll"
        :class="cantSearch ? 'h-nosearch' : ''"
      >
        <div class="filter-tree-scroll-box">
          <div
            v-show="provinceDisable"
            class="cover_disable"
          ></div>
          <el-tree
            v-show="filterTreeShow"
            ref="region_component_tree_ref"
            class="filter-tree"
            node-key="code"
            accordion
            highlight-current
            check-on-click-node
            :default-expanded-keys="defaultExpandedKeys"
            :props="defaultProps"
            :filter-node-method="filterNode"
            :load="loadNode"
            icon="ArrowRight"
            lazy
            @node-click="regionsClick"
          ></el-tree>
          <div
            v-show="!filterTreeShow"
            class="filter-result"
          >
            <ul v-show="!isNoData">
              <li
                v-for="(item, index) in filterResultList"
                :key="index"
                @click="selectResult(item)"
              >
                <i class="result-bg"></i>
                <span>{{ item.label }}</span>
              </li>
            </ul>
            <span
              v-show="isNoData"
              class="isNoData"
            >
              {{ $demoi18n('message.noData') }}
            </span>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
import regionApi from '@/apis/region.js';
import EventBus from '@/event-bus/EventBus.js';
import storage from '@/utils/ado-self/ado-storage';
import { $demoi18n } from '@/utils/lang';
import { convertTreeToList, isEmpty, isEmptyObject } from '@/utils/util.js';
import { nextTick } from 'vue';
import { mapState } from 'vuex';

export default {
  name: 'RegionsTree',
  emits: ['treeCurCodeChange', 'setHasChild', 'setClickedRegionNode', 'setRegionCode', 'getRegionList'],
  props: {
    form: {
      type: Object,
    },
    widgetInstanceId: {
      type: String,
      default: '',
    },
    level: {
      type: [String, Number],
      default: 6,
    },
    lLabel: {
      type: String,
      default: $demoi18n('message.plsSelectArea'),
    },
    listString: {
      type: Boolean,
      default: false,
    },
    defaultRegionCode: {
      type: String,
      default: '',
    },
    componentStyle: {
      type: String,
      default: '',
    },
    canChooseParent: {
      type: Boolean,
      default: true,
    },
    cantSearch: {
      type: Boolean,
      default: true,
    },
    singleArea: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      regionId: 'region',
      filterText: '',
      treeList: [],
      placeHolderString: this.$demoi18n('message.plsEnterProvinceCityBranchGridResponsibleField'),
      defaultProps: {
        children: 'children',
        label: 'name',
        isLeaf: 'leaf',
      },
      regionTreeShow: false,
      provinceDisable: false,
      currentRegionName: '',
      regionListString: '',
      defaultExpandedKeys: [], // 默认开启的节点key
      filterTreeShow: true, // 树状选择框
      filterResultList: [], // 过滤结果数组
      regionCode: '', // 当前区域code值
      isNoData: false, // 无数据
      netComplaint: false, // 数据导出网络投诉
      listener: null,
      realRegionList: [],
      curMessage: null,
      isDark: false,
      isFirst: true,
      hasPageWidgetsMounted: false,
      transTo: false,
      style: {
        'select_regions_tree': {
          margin: '10px',
        },
      },
      boxStyle: { backgroundColor: '' },
      curNode: null, // 当前展开的树节点对象
    };
  },
  computed: {
    ...mapState({
      regions: state => state.RegionModule.regions,
      currentRegionCode: state => state.RegionModule.currentRegionCode,
      currentRegionObj: state => {
        const cd = state.RegionModule.currentRegionCode;
        const all = state.RegionModule.regions;
        return all.find(tm => String(tm.code) === String(cd)) || {};
      },
      loginRegionCode: state => state.RegionModule.loginRegionCode,
    }),
  },
  watch: {
    currentRegionCode(newRegion, oldRegion) {
      if (newRegion && newRegion !== oldRegion) {
        this.regionCode = newRegion;
        this.openCurrentRegionNode();
      }
    },
    regionCode(code) {
      this.$emit('treeCurCodeChange', code);
    },
    filterText(val) {
      this.filterTreeFun(val);
    },
    loginRegionCode(newVal, oldVal) {
      this.regionCode = this.defaultRegionCode || newVal;

      // 权限值加载出来后
      if (newVal !== oldVal) {
        this.formatRegions();
      }
    },

    // 发出组件状态，是否已经全部就绪
    emitComponentStatus(newVal) {
      if (newVal) {
        this.sendMessage();
      }
    },

    curNode(node) {
      if (!node) {
        return;
      }
      if (node?.data?.code === this.currentRegionCode) {
        this.regionsClick(node.data);
        this.$refs.region_component_tree_ref.setCurrentKey(this.currentRegionCode);
        this.$refs.region_component_tree_ref.setChecked(this.currentRegionCode);
      }
    },

  },
  created() {
    if (this.level && String(this.level) === '4') {
      this.placeHolderString = this.$demoi18n('message.plsEnterProvinceCityBranchGridName');
    }
  },
  mounted() {
    this.regionId = `${this.regionId}_${this.widgetInstanceId}`;
    this.regionCode = this.defaultRegionCode || this.loginRegionCode;

    this.listener = e => {
      if (!this.$el.contains(e.target)) {
        this.regionTreeShow = false;
        this.filterText = '';
      }
    };
    document.addEventListener('click', this.listener, true);

    if (window.isLocalEnv) {
      this.loadWidget();
    }
  },
  beforeUnmount() {
    document.removeEventListener('click', this.listener, true);
  },
  unmounted() {
    EventBus.$off('page-widgets-mounted');
  },
  methods: {

    // 加入共享参数后的初始化区域
    fixBoxStyle() {
      setTimeout(() => {
        const oBox = document.getElementById(`select_regions_tree_component${this.widgetInstanceId}`);
        const rectObj = oBox.getBoundingClientRect();
        const regionBody = oBox.getElementsByClassName('regions-tree-body')[0];
        const clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
        const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        const mLeft = clientWidth - rectObj.left;
        const mTop = clientHeight - rectObj.top;
        if (mLeft < 310) {
          // 距离靠右了，要设置regionBody往左
          regionBody.style.left = 'auto';
          regionBody.style.right = '0px';
        } else {
          regionBody.style.left = '0';
          regionBody.style.right = 'auto';
        }
        if (mTop < 400) {
          // 距离靠右了，要设置regionBody往左
          regionBody.style.top = 'auto';
          regionBody.style.bottom = `${rectObj.height}px`;
        } else {
          regionBody.style.top = `${rectObj.height}px`;
          regionBody.style.bottom = 'auto';
        }
      }, 1000);
    },
    getPermission() {
      const userInfo = window._adoPremise && window._adoPremise.user;
      let userRoleInfo;
      if (userInfo) {
        const { currentRole } = userInfo;
        const { roles } = userInfo;
        userRoleInfo =
          roles.length > 0 &&
          currentRole.roleCode &&
          roles.find(role => {
            if (role.instanceRoleId) {
              return role.instanceRoleId === currentRole.roleCode;
            }
            return false;
          });
      }

      const obj = userRoleInfo || storage.get('role_info');
      const curPermissionObj = obj ? { ...obj, code: obj.targetId } : this.currentRegionObj;

      return curPermissionObj;
    },
    setFirstNode(resolve, regionArr) {
      const curPermissionObj = this.getPermission();
      const pmsLevel = curPermissionObj.level;

      // 树的第一个节点
      if (pmsLevel < 4) {
        // xvue区域数据只有三级，省、地市、分公司可以从已有的区域中获取
        const existList = (regionArr || this.regions).filter(tm => {
          tm.leaf = false;
          return tm.code === curPermissionObj.code;
        });
        resolve && resolve(existList);
        this.openCurrentRegionNode();

        if (this.isFirst) {
          this.clickFirstNode();
        }
      } else {
        this.getRegionChild(curPermissionObj.code, true).then(res => {
          resolve(res);
          this.openCurrentRegionNode();
          if (this.isFirst) {
            this.clickFirstNode();
          }
        });
      }
    },
    loadNode(node, resolve) {
      this.$emit('setClickedRegionNode', node.data);

      const nodeData = node.data;
      if (node.level === 0) {
        // 判断xvue 的 regions 有没有，没有的话自己请求区域数据
        if (this.regions && this.regions.length) {
          this.setFirstNode(resolve);
        } else {
          regionApi.componentGetRegions().then(res => {
            this.setFirstNode(resolve, res);
          });
        }
        this.curNode = node;
        return;
      }
      if (nodeData.level < 3) {
        const areaList = this.regions.filter(tm => {
          tm.leaf = false;
          return tm.parentCode === nodeData.code;
        });
        const finnalList = String(nodeData.level) === '1' && nodeData.code === 'GD' ? this.sortCityArea(areaList) : areaList;
        resolve(finnalList);
        this.curNode = node;
        return;
      }
      this.getRegionChild(nodeData.code).then(res => {
        resolve(res);
        this.curNode = node;
      });
    },
    getRegionChild(code, isRootLevel) {
      return new Promise((resolve, reject) => {
        regionApi.getCurrentRegionPrtChdRegs(code).then(res => {
          if (res && res.length) {
            this.$emit('setHasChild', true);
            let copy = JSON.parse(JSON.stringify(this.regions));
            const arr = res.filter(tm => {
              if (isRootLevel) {
                return String(tm.code) === String(code);
              }
              if (String(tm.parentCode) === String(code)) {
                if (tm.level >= this.form.levelNum) {
                  // 五级之后是最终节点了，没有下拉选择了
                  tm.leaf = true;
                }
                return true;
              }
              return false;
            });
            copy = copy.concat(arr);
            this.$store.commit('Get_Regions', copy);
            this.$store.commit('Get_All_Regions', copy);
            resolve(arr);
          } else {
            this.$emit('setHasChild', false);
            resolve([]);
          }
        });
      });
    },
    loadWidget() {
      this.isFirstSend = true; // 编排下重置状态

      this.fixBoxStyle();
      if (this.componentStyle === 'dark') {
        nextTick(() => {
          this.isDark = this.componentStyle === 'dark' ? true : false;
        });
      }
      this.setBoxBackground();
    },
    clickFirstNode() {
      // 设置开始点击第一个节点
      nextTick(() => {
        // 如果pageStatus有对应值
        if (this.isFirst && !isEmptyObject(this.currentPageStatus)) {
          const _value = this.getPageStatusParameterValue(this.currentPageStatus);

          // 状态中有区域code
          if (!isEmpty(_value)) {
            this.openCurrentRegionNode();
          } else {
            this._clickFirstNode();
          }
        } else {
          this._clickFirstNode();
        }
      });
    },
    _clickFirstNode() {
      const tr = this.$refs.region_component_tree_ref.$el;
      const dom = tr.getElementsByClassName('el-tree-node__content');
      if (dom && dom.length) {
        dom[0].click();
      }
      this.openCurrentRegionNode();
    },

    // 初始化列表
    formatRegions() {
      const { level } = this;
      if (this.loginRegionCode) {
        const { loginRegionCode } = this;
        const copyRegions = JSON.parse(JSON.stringify(this.regions));
        let dataList = this.filterArray(copyRegions, loginRegionCode, level);

        // 地址排序
        if (loginRegionCode === 'GD' || loginRegionCode === 'gd') {
          const areaList = [
            'GZ',
            'SZ',
            'DG',
            'FS',
            'ST',
            'ZH',
            'HZ',
            'ZS',
            'JM',
            'ZJ',
            'MM',
            'JY',
            'SG',
            'HY',
            'MZ',
            'SW',
            'YJ',
            'ZQ',
            'QY',
            'CZ',
            'YF',
          ];
          const newData = [];
          areaList.forEach((area, index) => {
            dataList.forEach((data, index2) => {
              if (data['code'] === area) {
                newData.push(data);
                return false;
              }
              return true;
            });
          });
          dataList = newData;
        }
        const parentRegionObj = copyRegions.filter(r => String(r.code) === String(loginRegionCode))[0];
        parentRegionObj.children = dataList;
        parentRegionObj.label = parentRegionObj.name;

        this.treeList = [parentRegionObj];
        this.realRegionList = convertTreeToList(this.treeList, 'id');
        this.openCurrentRegionNode();
      }
    },
    sortCityArea(arr) {
      // 广州城市先后循序调整
      const areaList = [
        'GZ',
        'SZ',
        'DG',
        'FS',
        'ST',
        'ZH',
        'HZ',
        'ZS',
        'JM',
        'ZJ',
        'MM',
        'JY',
        'SG',
        'HY',
        'MZ',
        'SW',
        'YJ',
        'ZQ',
        'QY',
        'CZ',
        'YF',
      ];
      const newData = [];
      areaList.forEach((area, index) => {
        arr.forEach((data, index2) => {
          if (data['code'] === area) {
            newData.push(data);
            return false;
          }
          return null;
        });
      });
      return newData;
    },

    // 展开当前区域节点
    openCurrentRegionNode(type) {
      let pageStatusCode = '';
      if (this.isFirst && !isEmptyObject(this.currentPageStatus)) {
        pageStatusCode = this.getPageStatusParameterValue(this.currentPageStatus);
      }
      const regionCode = pageStatusCode || this.currentRegionCode || this.regionCode; // 优先使用currentRegionCode
      if (regionCode) {
        this.regionCode = regionCode;
        this.filterText = '';
        nextTick(() => {
          const currentRegionObj = this.regions.filter(r => String(r.code) === String(regionCode))?.[0];
          this.currentRegionName = currentRegionObj.name;
          if (!type) {
            const list = this.findParents({ code: regionCode });
            this.setListStr(list);
          }
          const currentKey = currentRegionObj.code;
          this.$refs.region_component_tree_ref.setCurrentKey(currentKey); // treeBox 元素的ref   value 绑定的node-key
          this.$refs.region_component_tree_ref.setChecked(currentKey);
          this.defaultExpandedKeys = currentRegionObj.pathCode.split(',');
        });
      }
    },

    // 递归处理数组
    filterArray(data, parentCode, level) {
      const vm = this;
      const tree = [];
      let temp;
      for (let i = 0; i < data.length; i++) {
        if ((data[i].parent_code || String(data[i].parentCode)) === String(parentCode)) {
          const obj = data[i];
          obj.label = data[i].name;
          if (!level || obj.level < level) {
            temp = vm.filterArray(data, data[i].code, level);
            if (temp.length > 0) {
              obj.children = temp;
            }
          } else {
            obj.children = [];
          }
          if (!level || obj.level <= level) {
            tree.push(obj);
          }
        }
      }
      return tree;
    },

    // 过滤数据
    filterNode(value, data) {
      if (!value) {
        return true;
      }
      return data.label.indexOf(value) !== -1;
    },

    // 处理区域点击事件
    regionsClick(data) {
      if (this.level && String(data.level) !== String(this.level) && !this.canChooseParent) {
        this.curMessage && this.curMessage.close();
        this.curMessage = this.$message({
          type: 'warning',
          message: this.lLabel || this.$demoi18n('message.plsSelectResponsibilityLevel'),
        });
        return;
      }
      this.curMessage && this.curMessage.close();
      this.regionCode = data.code;

      this.$emit('setHasChild', !data.leaf);
      this.$emit('setClickedRegionNode', data),
      this.$emit('setRegionCode', this.regionCode);

      // 找出自己及父区域
      this.setRegion(data);
      this.sendMessage();
    },

    // 过滤结果到结果框
    filterTreeFun(val) {
      this.filterResultList = [];
      if (!val) {
        this.filterTreeShow = true;
        this.filterResultList.length = 0;
      } else {
        const result = this.realRegionList.filter(r => r.name.indexOf(val) !== -1);
        const hash = {};
        for (let index = 0; index < result.length; index++) {
          const element = result[index];
          let parentNodeList = [];

          if (element.all_parent_code || element.pathCode) {
            parentNodeList = (element.all_parent_code || element.pathCode).split(',');

            // 搜索时添加权限控制

            if (parentNodeList.indexOf(this.loginRegionCode) < 0) {
              continue;
            }
          } else {
            if (this.loginRegionCode === 'GD') {
              parentNodeList.push(element.code);
            } else {
              continue;
            }
          }

          const parentNodeListName = [];
          parentNodeList.forEach(item => {
            if (hash[item]) {
              parentNodeListName.push(hash[item]);
            } else {
              const node = this.realRegionList.filter(r => String(r.code) === String(item));
              if (node && node.length) {
                hash[item] = node[0].name;
                parentNodeListName.push(hash[item]);
              }
            }
          });
          this.filterResultList.push({
            regions: element,
            label: parentNodeListName.join(','),
            code: element.code,
          });
        }
        if (this.filterResultList && this.filterResultList.length) {
          this.isNoData = false;
          this.filterResultList.reverse();
        } else {
          this.isNoData = true;
        }
        this.filterTreeShow = false;
      }
    },

    // 处理查询出的区域点击事件
    selectResult(data) {
      this.regionCode = data.code;
      this.setRegion(data);
      this.openCurrentRegionNode('isSearch');
    },
    findParents(data) {
      // 找出自己及父区域
      const brumbRegions = [];
      const findParentRegion = (regionCode, optRegions) => {
        const region = this.regions.find(r => r.code === regionCode);
        if (region) {
          optRegions.push(region);
          const prtCode = region.parent_code || region.parentCode;
          if (prtCode) {
            findParentRegion(prtCode, optRegions);
          }
        }
      };

      // 查找面包屑
      findParentRegion(data.code, brumbRegions);

      const list = brumbRegions.reverse();
      return list;
    },
    setRegion(data) {
      const list = this.findParents(data);
      this.$emit('getRegionList', list);
      this.currentRegionName = list[list.length - 1].name;
      this.setListStr(list);
      this.regionTreeShow = false;
    },
    setListStr(list) {
      const newList = list;
      if (this.singleArea) {
        this.regionListString = list.slice(-1)[0].name;
      } else {
        this.regionListString = newList.map(tm => tm.name).join('/');
      }
    },
    sendMessage() {
      // 是否已经加载完全部组件
      if (!this.regionCode) {
        return;
      }

      if (this.widgetInstanceId) {
        if (this.isFirst) {
          this.isFirst = false;
        }
        this.setCurrentRegion(this.regionCode);
      }
    },
    setCurrentRegion(context, code) {
      if (!code) {
        return;
      }

      const getRegionByCode = _code => {
        regionApi
          .getCurrentRegionPrtChdRegs(_code)
          .then(result => {
            if (result && result.length) {
              const regions = context.state.allRegions;
              for (let i = 0; i < result.length; i++) {
                const _region = regions.find(r => String(r.code) === String(result[i].code));
                if (!_region) {
                  const newitem = JSON.parse(JSON.stringify(result[i]));
                  regions.push(newitem);
                }
              }
              window._adoPremise.regions = regions;
              storage.set('all_regions', regions);
              context.commit(TYPE.GET_REGIONS, regions);
              context.commit(TYPE.GET_ALL_REGIONS, regions);

              const curRegionP = regions.find(r => r.parentCode === _code) || {};
              if (curRegionP.level > 3) {
                getRegionByCode(curRegionP.code);
              }
            }
          });
      };

      regionApi
        .getCurrentRegionPrtChdRegs(code)
        .then(result => {
          if (result && result.length) {
            const regions = context.state.allRegions;
            for (let i = 0; i < result.length; i++) {
              const _region = regions.find(r => String(r.code) === String(result[i].code));
              if (!_region) {
                const newitem = JSON.parse(JSON.stringify(result[i]));
                regions.push(newitem);
              }
            }
            storage.set('all_regions', regions);
            context.commit(TYPE.GET_REGIONS, regions);
            context.commit(TYPE.GET_ALL_REGIONS, regions);

            context.commit(TYPE.SET_CURRENT_REGION, code);

            const curRegionP = regions.find(r => String(r.parentCode) === String(code)) || {};
            if (curRegionP.level > 3) {
              getRegionByCode(curRegionP.code);
            }
          }
        });
    },
    setBoxBackground() {
      this.boxStyle.backgroundColor = 'transparent! important';
    },
  },
};
</script>
<style lang="less" scoped>
.h-nosearch {
  height: 100% !important;
}
.region_box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  .select_regions-tree {
    flex: 0.95;
    width: 100%;
    transition: all ease-out 1s;
    display: inline-block;
    line-height: 28px;
    position: relative;
    box-sizing: border-box;
    height: 30px;
    color: #333;

    .regions-tree-current-name {
      white-space: nowrap;
      text-align: left;
      width: 100%;
      height: 100%;
      display: inline-block;
      cursor: pointer;
      position: relative;
      font-size: 12px;
      margin-bottom: 2px;
      border: 1px solid #dcdfe6;

      .regions-tree-name-content {
        padding: 0 0 0 15px;
        font-size: 12px;
      }

      .el-icon-caret-bottom {
        position: absolute;
        right: 8px;
        top: calc(50% - 8px);
        transition: all 0.2s linear;
      }

      .el-icon-caret-bottom.closeTree {
        transform: rotate(-180deg);
      }
    }

    .regions-tree-body {
      border: 1px solid #dcdfe6;
      left: -1px !important;
      background-color: #fff;
      overflow: hidden;
      width: 100%;
      height: 400px;

      .regions-tree-search {
        padding: 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #dcdfe6;
        font-size: 12px;
      }

      .regions-search-icon {
        position: absolute;
        right: 20px;
        top: 17px;
        z-index: 2;
        color: #666;
      }

      .filter-tree-scroll {
        height: calc(100% - 51px);

        &::before {
          content: ' ';
          display: block;
          width: 100%;
          height: 10px;
          position: absolute;
          bottom: 0;
          left: 0;
          background-color: #fff;
          z-index: 2;
        }

        .filter-tree-scroll-box {
          padding: 10px 10px 8px 10px;
        }

        .filter-result {
          .isNoData {
            display: inline-block;
            width: 100%;
            height: auto;
            text-align: center;
            color: #606266;
            font-size: 12px;
          }

          ul {
            margin: 0;
            padding: 0 10px 10px 0;
            user-select: none;
            text-align: left;

            li {
              list-style: none;
              margin: 0;
              padding: 2px 0;
              cursor: pointer;
              white-space: nowrap;
              word-break: keep-all;
              transition: color 0.2s;
              font-size: 12px;
              height: 20px;
              line-height: 20px;
              position: relative;

              span {
                position: relative;
                z-index: 1;
                display: inline-block;
                padding: 0 10px;
              }

              .result-bg {
                display: none;
                height: 100%;
                width: 160%;
                background-color: rgb(224, 238, 255);
                position: absolute;
                top: 0;
                left: 0;
                z-index: 0;
              }

              &:hover {
                .result-bg {
                  display: block;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="less" scoped>
.select_regions-tree {
  :deep(.el-tree){
    .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
      background-color: #e0eeff;
    }

    .regions-tree-body .regions-tree-search .el-input__inner {
      height: 30px;
      line-height: 30px;
      padding-right: 30px;
    }

    .el-scrollbar__wrap {
      overflow-x: hidden;

      .el-tree > .el-tree-node {
        display: inline-block;
        width: 100%;

        .el-tree-node__label {
          font-size: 12px;
        }
        .el-tree-node__content:hover {
          background-color: #e0eeff;
        }
      }
    }

    .el-scrollbar__bar {
      z-index: 3;
    }

  }
}
</style>
<style lang="less">
.select_regions-tree .regions-tree-body .filter-tree-scroll .filter-tree-scroll-box {
  position: relative;
}

.select_regions-tree .regions-tree-body .filter-tree-scroll .filter-tree-scroll-box .cover_disable {
  width: calc(100% - 20px);
  height: 26px;
  cursor: not-allowed;
  position: absolute;
  z-index: 10;
  background: #f5f5f5;
  opacity: 0.5;
}
@import url('../region/styles/darkStyle.less');
</style>
<style lang="less" scoped>
.select_regions-tree {
  border: none !important;
  line-height: 28px;
  .regions-tree-current-name {
    height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.regions-tree-dark-style {
  .regions-tree-current-name {
    border-color: #588ba8 !important;
  }
}

.regions-tree-dark-style {
  :deep(.el-tree-node__label) {
    color: #adc5d9 !important;
  }
}
.regions-tree-light-style {
  :deep(.el-tree-node__label) {
    color: #333333 !important;
  }
}
.regions-tree-light-style .select_regions-tree .regions-tree-current-name {
  background-color: #ffffff !important;
}
</style>
